<template>
    <div class="music-wrap">
        <div class="box">
            <div class="cover">
                <cover-image class="img" :src="cover" :size="coverSize" />
            </div>
            <div class="content">
                <div class="title">{{ title }}</div>
                <p class="desc">{{ view }}收听</p>
            </div>
        </div>
    </div>
</template>

<script>
import CoverImage from '@/components/CoverImage'
export default {
    name: 'PostMusic',
    components: {
        CoverImage
    },
    props: {
        id: {
            type: [Number, String]
        },
        title: {
            type: String
        },
        cover: {
            type: String
        },
        coverSize: {
            type: String,
            default: '@180w_180h_1c'
        },
        view: {
            type: Number
        }
    }
}
</script>

<style lang="scss" scoped>
    .music-wrap{
    padding: {
      left: 10px;
      right: 10px;
    }
    margin-bottom: 10px;
    .box {
      @include border1px(#e7e7e7, 1px, 4px);
      background-color: $color-white;
      display: flex;
      flex: 0 0 64px;
      height: 64px;
      margin-top: 8px;
    }
    .cover{
      width: 64px;
      height: 100%;  
      .img {
        padding-bottom: 100%;
      }    
    }
    .content{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1 1;
      overflow: hidden;
      padding: 10px;
    }
    .title{
      font-size: 15px;
      @include max-lines(1);
    }
    .desc{
      color: $color-text-secondary;
      font-size: 12px;
      margin: 0;
      @include max-lines(1);
    }
}
</style>